<template>
    <div id="big-data-container" class="big-data-container">
        <div class="head">
            <date-time v-if="current == 1 || current == 2"
                style="position: absolute; top: 30px; left: 100px; font-size: 18px;" />
            <yesterday v-if="current == 3" v-model="selectedDate" @change="handleDateChange"
                style="position: absolute; top: 30px; left: 100px; font-size: 18px;"></yesterday>
            <!-- <weather style="position: absolute; right: 50px; font-size: 18px;" /> -->
            <h1>
                <a style="text-decoration: none; color: inherit; cursor: pointer; font-size: 36px;"
                    v-if="current == 1 || current == 2" @click="changePage">考勤管理系统</a>
                <a style="text-decoration: none; color: inherit; cursor: pointer; font-size: 36px;" v-if="current == 3"
                    @click="changePage">人事考勤可视化看板</a>
            </h1>
        </div>
        <div class="data-container">
            <div class="data-left">
                <div class="data-left-item">
                    <!-- <div v-show="current==1">
                        <div class="title" style="position: relative;">
                            <div
                                style="display: inline-block;position: relative;left: -200px; font-size: 18px;">
                                <span>应出勤人数： {{ totalInfo.total }} 人</span> &nbsp;&nbsp;
                                <span>实际出勤人数： {{ totalInfo.actual }} 人</span> &nbsp;&nbsp;
                                <span>未打卡人数： {{ totalInfo.notClock }} 人</span> &nbsp;&nbsp;
                                <span>迟到人数： {{ totalInfo.late }} 人</span> &nbsp;&nbsp;
                                <span>缺勤人数： {{ totalInfo.absence }} 人</span> &nbsp;&nbsp;
                            </div>
                            <div
                                style="display: inline-block;position: relative;left: 200px;font-size: 18px;">
                                <span style="color: #00b0f0;">蓝色： 未打卡</span> &nbsp;&nbsp;
                                <span style="color: #ADFF2F;">绿色： 已打卡</span> &nbsp;&nbsp;
                                <span style="color: #d6860f;">橙色： 有异常</span> &nbsp;&nbsp;
                            </div>
                        </div>
                        <iview-circle></iview-circle>
                    </div> -->
                    <div v-show="current == 2">
                        <a-row>
                            <a-col :span="20">
                                <div class="title"
                                    style="position: relative; display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 18px;">
                                        <!-- <span>总人数：</span> -->
                                        <span>在职人数： {{ totalInfo.total }} 人</span> &nbsp;&nbsp;
                                        <span>实际出勤人数： {{ totalInfo.actual }} 人</span> &nbsp;&nbsp;
                                        <!-- <span>未打卡人数： {{ totalInfo.notClock }} 人</span> &nbsp;&nbsp; -->
                                        <span>迟到人数： {{ totalInfo.late }} 人</span> &nbsp;&nbsp;
                                        <span>缺勤人数： {{ totalInfo.absence }} 人</span> &nbsp;&nbsp;
                                    </div>
                                    <div style="font-size: 18px;">
                                        <span style="color: #88FFFF;">蓝色： 正常</span> &nbsp;&nbsp;
                                        <!-- <span style="color: #AEDD81;">绿色： 已打卡</span> &nbsp;&nbsp; -->
                                        <span style="color: #FC9D9A;">红色： 有异常</span> &nbsp;&nbsp;
                                    </div>
                                </div>
                                <iview-circle></iview-circle>
                            </a-col>
                            <a-col :span="4">
                                <div class="small-card"
                                    :style="'width: 90%; height: ' + (tableHeight * 4 / 21) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <weather />
                                </div>
                                <div class="small-card"
                                    :style="'width: 90%; height: ' + (tableHeight * 16 / 29) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <h3
                                        style="margin: 0; padding: 10px; text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.1);">
                                        外出/出差/请假</h3>
                                    <div class="scrollable-content" ref="travel1Content"
                                        @mouseenter="pauseScroll('travel1')" @mouseleave="startScroll('travel1')">
                                        <ul v-if="rightData"
                                            style="column-count: 2; column-gap: 20px; margin: 0; padding: 0;">
                                            <li v-for="(item, index) in rightData.travel" :key="index" style="break-inside: avoid; margin-bottom: 8px;
                                              padding: 2px 8px; border-right: 1px solid rgba(255,255,255,0.3);">
                                                <span style="font-size:11px">
                                                    {{ item.admit_name }}-{{ item.dict }}
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- <div class="small-card"
                                    :style="'width: 90%; height: ' + (tableHeight * 7 / 29) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <h3
                                        style="margin: 0; padding: 10px; text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.1);">
                                        请假</h3>
                                    <div class="scrollable-content" ref="leave1Content"
                                        @mouseenter="pauseScroll('leave1')" @mouseleave="startScroll('leave1')">
                                        <ul v-if="rightData">
                                            <li v-for="(item, index) in rightData.leaves" :key="index">
                                                {{ item.admit_name }} - {{ item.dict }}
                                            </li>
                                        </ul>
                                    </div>
                                </div> -->
                                <div class="small-card"
                                    :style="'width: 90%; height: ' + (tableHeight * 7 / 29) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <h3
                                        style="margin: 0; padding: 10px; text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.1);">
                                        迟到/早退</h3>
                                    <div class="scrollable-content" ref="other1Content"
                                        @mouseenter="pauseScroll('other1')" @mouseleave="startScroll('other1')">
                                        <ul v-if="rightData"
                                            style="column-count: 2; column-gap: 20px; margin: 0; padding: 0;">
                                            <li v-for="(item, index) in rightData.other" :key="index" style="break-inside: avoid; margin-bottom: 8px;
                                              padding: 2px 8px; border-right: 1px solid rgba(255,255,255,0.3);">
                                                <span style="font-size:11px">
                                                    {{ item.admit_name }}-{{ item.dict }}
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                    <div v-show="current == 3">
                        <a-row>
                            <a-col :span="6" style="padding: 0 8px;">
                                <div class="small-card" :style="'height: ' + (tableHeight / 3) + 'px; width: 100%;'">
                                    <div id="left1" style="height: 100%; width: 100%;"></div>
                                </div>
                                <div class="small-card" :style="'height: ' + (tableHeight / 3) + 'px; width: 100%;'">
                                    <div id="left2" style="height: 100%; width: 100%;"></div>
                                </div>
                                <div class="small-card" :style="'height: ' + (tableHeight / 3) + 'px; width: 100%;'">
                                    <div id="left3" style="height: 100%; width: 100%;">
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="12" style="padding: 0 8px;margin-left: 18px;">
                                <div class="small-card"
                                    :style="'height: ' + (tableHeight * 2 / 3) + 'px; width: 100%;'">
                                    <div id="center1" style="height: 100%; width: 100%;"></div>
                                    <!-- <div id="center2" style="height: 100%; width: 100%;"></div> -->
                                </div>
                                <div class="small-card" :style="'height: ' + (tableHeight / 3) + 'px; width: 100%;'">
                                    <div id="center3" style="height: 100%; width: 100%;"></div>
                                </div>
                            </a-col>
                            <a-col :span="5" style="padding-left:8px;margin-left: 18px;">
                                <div class="small-card"
                                    :style="'width: 100%; height: ' + (tableHeight / 5) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <weather />
                                </div>
                                <div class="small-card"
                                    :style="'width: 100%; height: ' + (tableHeight * 16 / 29) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <h3
                                        style="margin: 0; padding: 10px; text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.1);">
                                        外出/出差/请假</h3>
                                    <div class="scrollable-content" ref="travelContent"
                                        @mouseenter="pauseScroll('travel')" @mouseleave="startScroll('travel')">
                                        <ul v-if="rightData"
                                            style="column-count: 2; column-gap: 20px; margin: 0; padding: 0;">
                                            <li v-for="(item, index) in rightData.travel" :key="index" style="break-inside: avoid; margin-bottom: 8px;
                                              padding: 2px 8px; border-right: 1px solid rgba(255,255,255,0.3);">
                                                <span style="font-size:11px">
                                                    {{ item.admit_name }}-{{ item.dict }}
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- <div class="small-card"
                                    :style="'width: 100%; height: ' + (tableHeight / 4) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <h3
                                        style="margin: 0; padding: 10px; text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.1);">
                                        外出/出差</h3>
                                    <div class="scrollable-content" ref="travelContent"
                                        @mouseenter="pauseScroll('travel')" @mouseleave="startScroll('travel')">
                                        <ul v-if="rightData">
                                            <li v-for="(item, index) in rightData.travel" :key="index">
                                                {{ item.admit_name }} - {{ item.dict }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="small-card"
                                    :style="'width: 100%; height: ' + (tableHeight / 4) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <h3
                                        style="margin: 0; padding: 10px; text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.1);">
                                        请假</h3>
                                    <div class="scrollable-content" ref="leaveContent"
                                        @mouseenter="pauseScroll('leave')" @mouseleave="startScroll('leave')">
                                        <ul v-if="rightData">
                                            <li v-for="(item, index) in rightData.leaves" :key="index">
                                                {{ item.admit_name }} - {{ item.dict }}
                                            </li>
                                        </ul>
                                    </div>
                                </div> -->
                                <div class="small-card"
                                    :style="'width: 100%; height: ' + (tableHeight * 7 / 29) + 'px; position: relative; display: flex; flex-direction: column;'">
                                    <h3
                                        style="margin: 0; padding: 10px; text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.1);">
                                        迟到/早退</h3>
                                    <div class="scrollable-content" ref="other1Content"
                                        @mouseenter="pauseScroll('other1')" @mouseleave="startScroll('other1')">
                                        <ul v-if="rightData"
                                            style="column-count: 2; column-gap: 20px; margin: 0; padding: 0;">
                                            <li v-for="(item, index) in rightData.other" :key="index" style="break-inside: avoid; margin-bottom: 8px;
                                              padding: 2px 8px; border-right: 1px solid rgba(255,255,255,0.3);">
                                                <span style="font-size:11px">
                                                    {{ item.admit_name }}-{{ item.dict }}
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                    <div class="data-foot-line"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import IviewCircle from './IviewCircle.vue';
import './layout.less';
import DateTime from './dateTime.vue';
import Weather from './weather.vue';
import { getAction } from '../../api/manage';
import * as echarts from 'echarts';
import Yesterday from './yesterday.vue';

export default {
    components: {
        'iview-circle': IviewCircle,
        DateTime,
        Weather,
        Yesterday
    },
    data() {
        return {
            selectedDate: new Date(new Date().setDate(new Date().getDate())),
            tableHeight: this.calculateTableHeight(), // 初始化表格高度
            current: 2,
            totalInfo: {},
            rightData: {},
            url: {
                getTotal: '/clockRecord/clockRecord/total',
                getLeft1: '/clockRecord/clockRecord/getLeft1',
                getLeft2: '/clockRecord/clockRecord/getLeft2',
                getLeft3: '/employee/employee/getLeft3',
                getCenter1: '/employee/employee/getCenter1',
                getCenter3: '/clockRecord/clockRecord/getCenter3',
                getRight: '/clockRecord/clockRecord/getRight',
            },
            scrollIntervals: {
                travel: null,
                leave: null,
                other: null,
                travel1: null,
                leave1: null,
                other1: null,
            },
            intervalId: null,
        };
    },
    created() {
    },
    mounted() {
        window.addEventListener('resize', this.updateTableHeight);
        // 初始化时调用一次，确保初始状态下表格高度正确
        this.updateTableHeight();
        this.startScroll('travel');
        // this.startScroll('leave');
        this.startScroll('other');
        this.startScroll('travel1');
        // this.startScroll('leave1');
        this.startScroll('other1');
        // 初始化时立即调用一次
        this.getTotal()
        this.getRight()
        // 每10分钟(600000毫秒)调用一次getTotal方法
        this.intervalId = setInterval(() => {
            this.getTotal()
            this.getRight()
            this.getChartData()
        }, 10 * 1000);
    },
    methods: {
        handleDateChange(newDate) {
            this.getChartData()
            this.getRight()
        },
        changePage() {
            if (this.current == 3) {
                this.current = 2
                this.selectedDate = new Date(new Date().setDate(new Date().getDate()))
                this.getRight()
            } else {
                this.selectedDate = new Date(new Date().setDate(new Date().getDate() - 1))
                this.rightData = {}
                this.current++
            }
            if (3 == this.current) {
                this.getChartData()
            }
        },
        getTotal() {
            getAction(this.url.getTotal).then((res) => {
                if (res.success) {
                    this.totalInfo = res.result
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        getRight() {
            let start = this.formatDate(this.selectedDate) + ' 00:00:00'
            let end = this.formatDate(this.selectedDate) + ' 23:59:59'
            getAction(this.url.getRight + "?start=" + start + "&end=" + end).then((res) => {
                if (res.success) {
                    this.rightData = res.result
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        getChartData() {
            if (3 != this.current) {
                return
            }
            let start = this.formatDate(this.selectedDate) + ' 00:00:00'
            let end = this.formatDate(this.selectedDate) + ' 23:59:59'
            getAction(this.url.getLeft1 + "?start=" + start + "&end=" + end).then((res) => {
                if (res.success) {
                    console.log(res)
                    this.$nextTick(() => {
                        this.getLeft1(res.result)
                    })
                } else {
                    this.$message.warning(res.message)
                }
            })
            getAction(this.url.getLeft2 + "?start=" + start + "&end=" + end).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.getLeft2(res.result)
                    })
                } else {
                    this.$message.warning(res.message)
                }
            })
            getAction(this.url.getLeft3).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.getLeft3(res.result)
                    })
                } else {
                    this.$message.warning(res.message)
                }
            })
            getAction(this.url.getCenter1).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.getCenter1(res.result)
                    })
                } else {
                    this.$message.warning(res.message)
                }
            })
            getAction(this.url.getCenter3).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.getCenter3(res.result)
                    })
                } else {
                    this.$message.warning(res.message)
                }
            })
            // this.$nextTick(() => {
            //     this.getCenter2()
            // });
        },
        getLeft1(result) {
            if (this.current == 3) {
                let dept = []
                let all = 0
                result.forEach(e => {
                    dept.push(e.name)
                    all += e.value
                })
                const chartDom = document.getElementById('left1');
                if (!chartDom) return;

                let myChart = echarts.getInstanceByDom(chartDom);
                if (myChart) {
                    myChart.dispose(); // 销毁旧的实例
                }
                myChart = echarts.init(chartDom); // 创建新的实例
                // 绘制图表
                myChart.setOption({
                    color: ['#FB8201', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                    tooltip: {
                        trigger: 'item', //数据项图形触发
                        formatter: '{b}: {c} 人 ({d}%)', // 展示格式
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    legend: {
                        data: dept, // 图例
                        textStyle: {
                            color: '#000' // 图例文字颜色
                        },
                        orient: 'horizontal', // 设置图例为水平布局
                        bottom: '5%', // 距离容器底部的距离
                    },
                    title: {
                        text: "出勤人数",
                        textStyle: {
                            color: '#000',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        left: 'center', // 将标题水平居中
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['40%', '50%'],
                            center: ['50%', '50%'], // 调整此行以移动饼图的位置
                            clockwise: false,
                            label: {
                                color: '#000',
                                position: 'outside',
                                formatter: '{b}\n{c} 人 ({d}%)',
                            },
                            data: result,
                        },
                    ],
                    graphic: {
                        elements: [
                            {
                                type: 'text', // 组件类型
                                left: 'center', //定位
                                top: '43%', // 定位
                                style: {
                                    // 样式
                                    text: '总人数', //文字
                                    fontSize: 13, //文字大小
                                    textAlign: 'center', //定位
                                    width: 30,
                                    height: 30,
                                    fill: '#000', // 字体颜色
                                },
                            },
                            {
                                type: 'text',
                                left: 'center',
                                top: '52%',
                                style: {
                                    text: all,
                                    fontSize: 18,
                                    textAlign: 'center',
                                    width: 30,
                                    height: 25,
                                    fill: '#000',
                                },
                            },
                        ],
                    },
                })
            }
        },
        getLeft2(result) {
            if (this.current == 3) {
                let dept = []
                let percentage = []
                result.forEach(e => {
                    dept.push(e.dept)
                    percentage.push(e.percentage)
                })
                const chartDom = document.getElementById('left2');
                if (!chartDom) return;
                let myChart = echarts.getInstanceByDom(chartDom);
                if (myChart) {
                    myChart.dispose(); // 销毁旧的实例
                }
                myChart = echarts.init(chartDom); // 创建新的实例
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: "0%",
                        top: "30px",  // 调整此值以确保有足够的空间放置标题
                        right: "5%",
                        bottom: "4%",
                        containLabel: true
                    },
                    title: {
                        text: "各部门出勤率统计",
                        textStyle: {
                            color: '#000',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        left: 'center', // 将标题水平居中
                    },
                    xAxis: {
                        type: 'value',
                        min: 0, // 设置最小值为0
                        max: 100, // 设置最大值为100
                        axisLabel: {
                            show: true,
                            color: "rgba(0,0,0,.6)",
                            fontSize: "12",
                            formatter: function (value) { // 格式化器，用于将数值转换为百分比形式
                                return value + '%';
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(0,0,0,.1)",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(0,0,0,.1)"
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        axisLabel: {
                            show: true,
                            color: "rgba(0,0,0,.6)",
                            fontSize: "9"
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(0,0,0,.1	)",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(0,0,0,.1)"
                            }
                        },
                        data: dept
                    },
                    series: [
                        {
                            name: '百分比',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            barWidth: "55%",
                            itemStyle: {
                                color: "#2f89cf",
                                opacity: 1,
                                borderRadius: 5
                            },
                            data: percentage
                        }
                    ]
                })
            }
        },
        getLeft3(result) {
            if (this.current == 3) {
                let month = []
                let create_count = []
                let update_and_disable_count = []
                result.forEach(e => {
                    month.push(e.month)
                    create_count.push(e.create_count)
                    update_and_disable_count.push(e.update_and_disable_count)
                })
                const chartDom = document.getElementById('left3');
                if (!chartDom) return;
                let myChart = echarts.getInstanceByDom(chartDom);
                if (myChart) {
                    myChart.dispose(); // 销毁旧的实例
                }
                myChart = echarts.init(chartDom); // 创建新的实例
                // 绘制图表
                myChart.setOption({
                    color: ['#DD0', '#91cd77'], // 设置线条颜色，分别为入职和离职的颜色
                    tooltip: {
                        trigger: 'axis' // 数据项触发
                    },
                    legend: {
                        data: ['入职人数', '离职人数'], // 图例
                        textStyle: {
                            color: '#000' // 图例文字颜色
                        },
                        orient: 'horizontal', // 设置图例为水平布局
                        bottom: '10px', // 距离容器底部的距离
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    title: {
                        text: "入职、离职人数统计", // 标题文本
                        textStyle: {
                            color: '#000',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        left: 'center', // 将标题水平居中
                    },
                    xAxis: {
                        type: 'category', // 类目轴
                        boundaryGap: false, // 坐标轴两边留白策略
                        data: month, // 横坐标数据（月份）
                        axisLabel: {
                            color: "#000", // 轴标签文字颜色
                            fontSize: "10",
                            formatter: function (value) { // 格式化器，用于在数值后面添加"月"
                                return value + '月';
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#ccc" // 轴线颜色
                            }
                        }
                    },
                    yAxis: {
                        type: 'value', // 数值轴
                        axisLabel: {
                            color: "#000", // 轴标签文字颜色
                            fontSize: "12"
                        },
                        minInterval: 1, // 设置最小间隔为1，确保不会出现小数点
                        max: 10,
                        axisLine: {
                            lineStyle: {
                                color: "#ccc" // 轴线颜色
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#eee" // 分割线颜色
                            }
                        }
                    },
                    series: [
                        {
                            name: '入职人数',
                            type: 'line', // 折线图类型
                            data: create_count // 入职人数数据
                        },
                        {
                            name: '离职人数',
                            type: 'line', // 折线图类型
                            data: update_and_disable_count // 离职人数数据
                        }
                    ]
                });
            }
        },
        getCenter1(result) {
            if (this.current == 3) {
                let deptColors = {
                    '制造部': '#D2691E',
                    '品质技术部': '#ED7D31',
                    '品质保证部': '#FF8C00',
                    '制造统括部': '#FFA07A',
                    '环境安全部': '#FFC080',
                    '内部统制部': '#75BEDC',
                    '运营部': '#9CC2E5',
                    '管理部': '#AED6F1',
                    '财务课': '#CED4DA',
                    '营业部': '#D6EAF8',
                    '总公司': '#E8F8F5',
                }
                let colors = ['#D2691E', '#ED7D31', '#FF8C00', '#FFA07A', '#FFC080',
                    '#75BEDC', '#9CC2E5', '#AED6F1', '#CED4DA', '#D6EAF8', '#E8F8F5'];
                let dept = []
                result.forEach(e => {
                    dept.push(e.name)
                })
                const chartDom = document.getElementById('center1');
                if (!chartDom) return;

                let myChart = echarts.getInstanceByDom(chartDom);
                if (myChart) {
                    myChart.dispose(); // 销毁旧的实例
                }
                myChart = echarts.init(chartDom); // 创建新的实例
                // 绘制图表
                myChart.setOption({
                    color: colors,
                    tooltip: {
                        trigger: 'item', //数据项图形触发
                        formatter: '{b}: {c} 人 ({d}%)', // 展示格式
                    },
                    legend: {
                        data: dept, // 图例
                        textStyle: {
                            color: '#000' // 图例文字颜色
                        },
                        orient: 'vertical', // 设置图例为水平布局
                        top: '20%',
                        left: '10%', // 距离容器底部的距离
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    title: {
                        text: "部门人员占比",
                        textStyle: {
                            color: '#000',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        left: 'center', // 将标题水平居中
                        top: '3s%',
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['40%', '60%'],
                            center: ['60%', '50%'], // 调整此行以移动饼图的位置
                            clockwise: false,
                            label: {
                                color: '#000',
                                position: 'outside',
                                formatter: '{b}\n{c} 人 ({d}%)',
                            },
                            data: result.map(item => ({
                                ...item,
                                itemStyle: {
                                    color: deptColors[item.name] || colors[result.indexOf(item) % colors.length]
                                }
                            })),
                        },
                    ],
                    graphic: {
                        elements: [
                            {
                                type: 'text', // 组件类型
                                left: '55.5%',
                                top: '42%', // 定位
                                style: {
                                    // 样式
                                    text: '部门总数', //文字
                                    fontSize: 18, //文字大小
                                    textAlign: 'center', //定位
                                    width: 30,
                                    height: 30,
                                    fill: '#000', // 字体颜色
                                },
                            },
                            {
                                type: 'text',
                                left: '58.4%',
                                top: '52%',
                                style: {
                                    text: result.length,
                                    fontSize: 24,
                                    textAlign: 'center',
                                    width: 30,
                                    height: 25,
                                    fill: '#000',
                                },
                            },
                        ],
                    },
                })
            }
        },
        getCenter2() {
            if (this.current == 3) {
                let arr = [{ value: 1, name: '部门1' }, { value: 1, name: '部门2' }, { value: 1, name: '部门3' }, { value: 1, name: '部门4' }]
                let all = 4
                const chartDom = document.getElementById('center2');
                if (!chartDom) return;

                let myChart = echarts.getInstanceByDom(chartDom);
                if (myChart) {
                    myChart.dispose(); // 销毁旧的实例
                }
                myChart = echarts.init(chartDom); // 创建新的实例
                // 绘制图表
                myChart.setOption({
                    color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                    tooltip: {
                        trigger: 'item', //数据项图形触发
                        formatter: '{b}: {c} 人 ({d}%)', // 展示格式
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    title: {
                        text: "部门类别占比",
                        textStyle: {
                            color: '#FFF',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        left: 'center', // 将标题水平居中
                        top: '20%',
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['50%', '70%'],
                            center: ['50%', '60%'], // 调整此行以移动饼图的位置
                            clockwise: false,
                            label: {
                                position: 'outside',
                                formatter: '{b}\n{c} 人 ({d}%)',
                            },
                            data: arr,
                        },
                    ],
                    graphic: {
                        elements: [
                            {
                                type: 'text', // 组件类型
                                left: 'center', //定位
                                top: '53%', // 定位
                                style: {
                                    // 样式
                                    text: '记录总数(条)', //文字
                                    fontSize: 13, //文字大小
                                    textAlign: 'center', //定位
                                    width: 30,
                                    height: 30,
                                    fill: 'darkgray', // 字体颜色
                                },
                            },
                            {
                                type: 'text',
                                left: 'center',
                                top: '62%',
                                style: {
                                    text: all,
                                    fontSize: 18,
                                    textAlign: 'center',
                                    width: 30,
                                    height: 25,
                                    fill: '#3BA5D9',
                                },
                            },
                        ],
                    },
                })
            }
        },
        getCenter3(result) {
            if (this.current == 3) {
                let date = []
                let percentage = []
                result.forEach(e => {
                    date.push(e.date)
                    percentage.push(e.percentage)
                })
                // 对数组进行反序
                date.reverse();
                percentage.reverse();
                const chartDom = document.getElementById('center3');
                if (!chartDom) return;
                let myChart = echarts.getInstanceByDom(chartDom);
                if (myChart) {
                    myChart.dispose(); // 销毁旧的实例
                }
                myChart = echarts.init(chartDom); // 创建新的实例
                // 绘制图表
                myChart.setOption({
                    color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                    tooltip: {
                        trigger: 'axis', // 修改为轴触发
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    title: {
                        text: "出勤率统计", // 添加标题文本
                        textStyle: {
                            color: '#000',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        left: 'center', // 将标题水平居中
                    },
                    xAxis: {
                        type: 'category', // 类目轴
                        data: date,
                        axisLabel: {
                            show: true,
                            color: "rgba(0,0,0,.6)",
                            fontSize: "12"
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(0,0,0,.1)",
                                width: 1,
                                type: "solid"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value', // 数值轴
                        min: 0, // 最小值
                        max: 100, // 最大值
                        interval: 20, // 间隔
                        axisLabel: {
                            show: true,
                            color: "rgba(0,0,0,.6)",
                            fontSize: "12",
                            formatter: function (value) {
                                return value + '%';
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(0,0,0,.1)",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(0,0,0,.1)"
                            }
                        }
                    },
                    series: [
                        {
                            name: '出勤率',
                            type: 'bar', // 修改为柱状图
                            barWidth: '50%', // 柱子宽度
                            itemStyle: {
                                color: function (params) {
                                    var colorList = ['#ED7D31', '#ED7D31', '#ED7D31', '#ED7D31', '#ED7D31'];
                                    return colorList[params.dataIndex];
                                },
                                borderRadius: 5
                            },
                            label: {
                                show: true, // 显示数值
                                position: 'top', // 标签位置
                                color: '#000', // 标签颜色
                                fontSize: 12, // 字体大小
                                formatter: function (params) {
                                    return params.value + '%'; // 在数值后添加百分号
                                },
                            },
                            data: percentage
                        }
                    ]
                });
            }
        },
        autoScroll(refName) {
            return;
            const content = this.$refs[refName + 'Content'];
            if (content.scrollTop + content.clientHeight >= content.scrollHeight - 1) {
                content.scrollTop = 0;
            } else {
                content.scrollTop += 1;
            }
        },
        startScroll(refName) {
            this.pauseScroll(refName);
            this.scrollIntervals[refName] = setInterval(() => {
                this.autoScroll(refName);
            }, 50);
        },
        pauseScroll(refName) {
            clearInterval(this.scrollIntervals[refName]);
        },
        calculateTableHeight() {
            // 计算表格应有的高度，这里假设除了表格外，页面顶部有100px的其他元素
            return window.innerHeight - 160;
        },
        updateTableHeight() {
            this.tableHeight = this.calculateTableHeight();
        },
        formatDate(date) {
            if (!date) return '';
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始所以需要加1
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    },
    beforeDestroy() {
        // 清除定时器防止内存泄漏
        this.pauseScroll('travel');
        // this.pauseScroll('leave');
        this.pauseScroll('other');
        this.pauseScroll('travel1');
        // this.pauseScroll('leave1');
        this.pauseScroll('other1');
        // 清除监听器以避免内存泄漏
        window.removeEventListener('resize', this.updateTableHeight);
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }
};
</script>
<style scoped>
.right-3 {
    display: flex;
    flex-direction: column;
    /* margin-top: 20px; */
}

.right-3 .right-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.right-3 .item {
    text-align: left;
    border-bottom: 1px solid #549069;
    flex: 1;
    display: flex;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 14px;
    line-height: 30px;
}

.right-3 .item:last-child {
    border-bottom: 0;
}

.right-3 .item>div {
    color: white;
}

.right-3 .top {
    width: 60px;
    position: relative;
}

.right-3 .top span {
    position: absolute;
    width: 20px;
    line-height: 20px;
    top: 5px;
    text-align: center;
    border-radius: 5px;
}

.right-3 .top-1 span {
    background: #e80d0d;
}

.right-3 .top-2 span {
    background: #00c935;
}

.right-3 .top-3 span {
    background: #0083f4;
}

.right-3 .num {
    width: 88px;
}

.right-3 .pro-name {
    flex: 1;
}

/* 隐藏滚动条 */
.scrollable-content {
    color: #000000;
    padding: 10px;
    flex-grow: 1;
    height: calc(100% - 20px);
    /* 减去padding值以确保内容完全适应容器 */
    box-sizing: border-box;
    overflow-y: scroll;
    /* 启用垂直滚动 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

/* 针对Webkit浏览器（如Chrome, Safari）隐藏滚动条 */
.scrollable-content::-webkit-scrollbar {
    display: none;
}

/* 标题样式 */
.scrollable-content h3 {
    margin-top: 0;
    color: #fff;
    /* 标题文字颜色 */
    font-size: 16px;
    margin-bottom: 10px;
    /* 给标题和列表之间留一些空间 */
}

/* 列表样式 */
.scrollable-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.scrollable-content li {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    /* 浅色分隔线 */
    font-size: 14px;
    background-color: rgba(92, 92, 92, 0.1);
    /* 轻微的背景加深效果 */
}

.scrollable-content li:last-child {
    border-bottom: none;
}
</style>